<template>
	<div style="display: flex;align-items: center;margin-bottom: 20px;">
		<span style="margin-right: 10px;cursor: pointer;display: flex;align-items: center;" @click="back">
			<el-icon><ArrowLeft /></el-icon>
			<span @click="goback">返回</span>
			<span style="margin-left: 10px;">|</span>
		</span>
		<h3 style="margin-bottom: 0px;">添加/编辑分销商</h3>
	</div>
	<div class="traderinfo">
	<el-form :model="formData" >
		<el-form-item label="分销商等级" label-width="120px" required>
		  <el-select v-model="dleveloptionvalue" style="width: 200px;" placeholder="请选择分销等级">
		   <el-option
		     v-for="item in dleveloption"
		     :key="item.levelGrade"
		     :label="item.levelName"
		     :value="item.distributionLevelId"
		   />
		  </el-select>
			<span class="mya" @click="replay">刷新</span>
			<span class="mya" @click="goaddlevel">添加等级</span>
		</el-form-item>
		<el-form-item label="关联会员" label-width="120px" required>
			<el-input 
			style="width: 205px;"
			disabled
			placeholder="暂无关联会员"
			v-model="relationvip"
			></el-input>
			<el-button style="margin-left: 15px;" type="primary" @click="takevip">选择会员</el-button>
		</el-form-item>
		<el-form-item label="上级分销商" label-width="120px" required>
			<el-input
			style="width: 205px;"
			disabled
			placeholder="选择上级分销商"
			v-model="supertarder"
			></el-input>
			<el-button style="margin-left: 15px;" type="primary" @click="taketarder">选择分销商</el-button>
		</el-form-item>
		
	</el-form>
	
	<!-- 选择关联会员 -->
	<el-dialog v-model="dialogFormVisible1" title="选择会员" width="600">
	    <el-form>
	      <el-form-item label="会员信息">
			<el-input placeholder="请输入会员手机号" style="width:220px ;" v-model="vipInfo"></el-input>
			<el-button @click="searchvip" style="margin-left: 15px;" type="primary">搜索</el-button>
			<el-button  @click="resetvip">重置</el-button>
	      </el-form-item>
		  <el-table :data="traderTable" style="width: 100%">
		  	<el-table-column prop="userName" label="会员信息" width="160" />
			<el-table-column prop="userTel" label="手机号" width="160" />
			<el-table-column  label="操作">
		  		<template #default="{row}">
		  			<el-button @click="makechance1(row)" type="primary">选择</el-button>
		  		</template>
		  	</el-table-column>
		  </el-table>
		<el-pagination
			layout="prev,pager,next"
			:page-count="total"
			:page-size="pageSize"
			v-model:current-page="pageIndex"	
			@current-change="changePage"
		></el-pagination>
	    </el-form>
	  </el-dialog>
	
	<el-dialog v-model="dialogFormVisible2" title="提示" width="400">
	    <el-form>
			<div style="margin: 0 auto;text-align: center;">确认选择该会员吗?</div>
	    </el-form>
		<template #footer>
		  <div class="dialog-footer">
		    <el-button @click="dialogFormVisible2 = false">取消</el-button>
		    <el-button type="primary" @click="sure1">
		      确定
		    </el-button>
		  </div>
		</template>
	  </el-dialog>
	
	
	
	<el-dialog v-model="dialogFormVisible3" title="选择分销商" width="600">
	    <el-form>
	      <el-form-item label="分销商信息">
			<el-input placeholder="请输入分销商手机号" style="width:220px ;" v-model="superinfo"></el-input>
			<el-button @click="searchsuperior" style="margin-left: 15px;" type="primary">搜索</el-button>
			<el-button @click="superreset">重置</el-button>
	      </el-form-item>
		  <el-table :data="traderTable" style="width: 100%">
		  	<el-table-column prop="userName" label="分销商信息" width="160" />
			<el-table-column prop="phone" label="分销商手机号" width="160" />
			<el-table-column prop="distributiorStatus" label="当前状态" width="160" />
			<el-table-column  label="操作">
				
		  		<template #default="{row}">
		  			<el-button @click="makechance2(row)" type="primary">选择</el-button>
		  		</template>
		  	</el-table-column>
		  </el-table>
	    </el-form>
		<el-pagination
			layout="prev,pager,next"
			:page-count="total"
			:page-size="pageSize"
			v-model:current-page="pageIndex"	
			@current-change="changePage1"
		></el-pagination>
	  </el-dialog>
	
	<el-dialog v-model="dialogFormVisible4" title="提示" width="400">
	    <el-form>
			<p style="text-align: center;">确认选择该分销商级吗?</p>
	    </el-form>
		<template #footer>
		  <div class="dialog-footer">
		    <el-button @click="dialogFormVisible4 = false">取消</el-button>
		    <el-button type="primary" @click="sure2">
		      确定
		    </el-button>
		  </div>
		</template>
	  </el-dialog>
	</div>
		<div style="text-align: center;">
			<el-button type="primary" @click="save">保存</el-button>
			<el-button @click="addCancel">取消</el-button>
		</div>
</template>

<script setup>
	import { ref,onMounted,reactive} from "vue" 
	import { defineEmits } from "vue";
	import {
		getTraderLevel,
		updatasuper,
		supertradersearch,
		VipList,
		addTarder,
		disviplist,
		addViplist
		} from "@/api"
	import { useRoute, useRouter } from "vue-router"
	import { number } from "echarts";
	import { EditPen,ArrowLeft } from '@element-plus/icons-vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	let router=useRouter()
	let route=useRoute()
	
	let pageIndex=ref(1);
	let pageSize=5;
	let total=ref(0)
	const dleveloption=ref([])
	const dleveloptionvalue=ref()
	let formData=reactive({
		// traderlevel: dleveloptionvalue.value,
		// ralatinovip: relationvip.value,
		// supertader: supertarder.value
	})
	
	//获取分校商等级
	const gettraderlevel = async ()=>{
		let res=await getTraderLevel({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:Number(sessionStorage.getItem("siteId")),
		})
		console.log("分销等级",res)
		dleveloption.value=res.list
		// tableData.value=res.list
		// total.value=res.pageCount
	}
	const replay=()=>{
		window.location.reload()
	}
	
	const dialogFormVisible1=ref(false)
	const dialogFormVisible2=ref(false)
	const dialogFormVisible3=ref(false)
	const dialogFormVisible4=ref(false)
	const traderTable=ref([])
	//点击选择关联会员
	const takevip=async ()=>{
		dialogFormVisible1.value=true
		let res=await addViplist({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:Number(sessionStorage.getItem("siteId")),
			
		})
		// console.log("选择会员",res);
		// let arr=[]
		// res.list.forEach(v=>{
		// 	if(v.isDistributor=="否"){
		// 		arr.push(v)
		// 	}
		// })
		traderTable.value=res
		total.value=1
	}
	//点击选择上级分销商
	const superinfo=ref('')
	const taketarder=async ()=>{
		dialogFormVisible3.value=true
		let res=await supertradersearch({
				"pageIndex":pageIndex.value,
				"pageSize":pageSize,
				siteId:Number(sessionStorage.getItem("siteId")),
		})
			traderTable.value=res.list
			total.value=res.pageCount
			// console.log("选择分销商",res);
	}
	
	
	const vipInfo=ref('')
	const searchvip = async ()=>{
	let res=await addViplist({
		"phone": vipInfo.value,
		"pageIndex":pageIndex.value,
		"pageSize":pageSize,
		siteId:Number(sessionStorage.getItem("siteId")),
	})
	traderTable.value=res
	// console.log("搜索到的会员列表",res)
	}
	//会员列表重置
	const resetvip=()=>{
		vipInfo.value=''
		takevip()
	}
	const searchsuperior=async()=>{
		let res=await supertradersearch({
				"info": superinfo.value,
				"pageIndex":pageIndex.value,
				"pageSize":pageSize,
				siteId:Number(sessionStorage.getItem("siteId")),
		})
			traderTable.value=res.list
			total.value=res.pageCount
			// console.log("搜索到的分销商",res)
	}
	// 可选上级分销商列表重置
	const superreset=async ()=>{
		superinfo.value=''
		taketarder()
	}
	
	const relationvip=ref()
	const supertarder=ref()
	// 点击选择会员
	const makechance1=(row)=>{
		dialogFormVisible2.value=true
		sessionStorage.setItem("adduserId", row.userId)  
		relationvip.value=row.userName
		
	}
	const makechance2=(row)=>{
		dialogFormVisible4.value=true
		supertarder.value=row.userName
		sessionStorage.setItem("adddisId", row.distributorId)  
	}
	const sure1=()=>{
		dialogFormVisible2.value=false
	}
	const sure2=()=>{
		dialogFormVisible4.value=false
	}
	const save= async ()=>{
		if(dleveloptionvalue.value==null){
			ElMessage({
				message:"请选择分销商等级",
				type:"error"
			})
		}
		else if(relationvip.value==null){
			ElMessage({
				message:"请选择关联会员",
				type:"error"
			})
		}
		else if(supertarder.value==null){
			ElMessage({
				message:"请选择上级分销商",
				type:"error"
			})
		}
		else{
			let res=await addTarder({
				distributionLevelId:Number(dleveloptionvalue.value),
				userId:Number(sessionStorage.getItem("adduserId")),
				distributorId:Number(sessionStorage.getItem("adddisId")),
				siteId:Number(sessionStorage.getItem("siteId"))
			})
			if(res==null){
				ElMessage({
					message:"保存成功",
					type: 'success',
				})
				setTimeout(()=>{
					emit("changshow")
				},600)
			}
			// console.log("添加分销商",res)	
		}
	
	}
	const addCancel=()=>{
		emit("changshow")
	}
	
	

	
	
	//添加分销商等级
	const goaddlevel=()=>{
		console.log(123);
		router.push('/hidedistribute/hidedistributemanage/hidedistributelevel')
	}
	const emit=defineEmits()
	//点击返回
	const goback=()=>{
		emit("changshow")
	}
	
	//获取分页
	const changePage=(page)=>{
		console.log(page)
		pageIndex.value=page;
		searchvip()
	}
	const changePage1=(page)=>{
		console.log(page)
		pageIndex.value=page;
		taketarder()
	}
	onMounted(()=>{
		gettraderlevel()
	})
</script>

<style lang="less" scoped>
	h3{
		
		margin-bottom: 20px;
		align-items: center;
	
		display: flex;
		
	}
	.mya{

		display: inline-block;
		color: #4b5db9;
		width: 80px;
		text-align: center;
	}
	// .el-form-item{
	// 	display: flex;
	// 	align-items: center;
		
	// }
	.traderinfo{
		margin-left: 100px;
	}
</style>